<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>签字</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <title></title>
    <style type="text/css">
      #sign {
        width: calc(100vw - 30px);
        height: calc(100vw - 30px);
        margin: 20px auto;
        border: 2px dashed #3188FE;
        background: #D4E6FF;
        border-radius: 5px;
      }
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">签字</h1>
      <a class="mui-pull-right mui-bar-right" id="clear">清空</a>
    </header>
    <div class="mui-content page-wrap bg-white">
      <div class="page-scroll">
        <div id="sign"></div>
        <div class="text-center color-999">
          请在方框内手动签字
        </div>
      </div>

      <div class="fixed-btn">
        <button type="button" id="sure" class="mui-btn mui-btn-primary">提交</button>
      </div>
    </div>

    <script type="text/javascript" src="../../../js/mui.js"></script>
    <script src="../js/mkeyplus.base.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="../../../js/jquery-3.2.1.min.js"></script>
    <script src="../js/sign.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      mui.init()
      let self=null; // 当前页面
      let lineType= null
      if(window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }

      function plusready() {
        self = plus.webview.currentWebview();
      }

      let sign = new EleSign({
        ele: document.getElementById('sign'),
      });
      sign.init()
      $("#clear").click(function() {
        sign.clear()
      })
      $("#sure").click(function() {
        if(sign.isEmpty()) {
          mui.toast("请签名");
          return false
        }
        let baseUrl = sign.toPng()
        lineType = getSysInfo();
         
        plus.nativeUI.showWaiting('上传中')
        mui.baseApp.base64ToPath(baseUrl).then(res => {
          if(!lineType){
            plus.nativeUI.closeWaiting()
            mui.fire(self.opener(), 'sign', {
              img: baseUrl,
              // fileId: res.data.id,
              filePath: res
            })
            mui.back()
            return
          }
          mui.baseApp.upLoadFile(res, function(res) {
            console.log(res)
            plus.nativeUI.closeWaiting()
//          mui.toast("上传成功")
            mui.fire(self.opener(), 'sign', {
              img: baseUrl,
              fileId: res.data.id,
              filePath: res.data.fileDirectory
            })
            mui.back()
          })
        })
        
      })
      function getSysInfo() {
          types = {};
          types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
          types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
          types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
          types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
          types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
       
          var str = types[plus.networkinfo.getCurrentType()];
          if (str == '未知' || str == '未连接网络') {
              return false;
          } else {
              return true;
          }
       
      }
    </script>
  </body>

</html>